<template>
  <div class="margin-container-list">
    <div class="flex-between mar-b-10">
      <div>
        <el-input v-model="searchListQuery.keyword" placeholder="请输入店长昵称、店长姓名或手机号" class="width-300"></el-input>
        <el-select class="mar-r-3 width-150" v-model="searchListQuery.provinceCode" placeholder="省" clearable @change="changeCity(searchListQuery.provinceCode)">
            <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
        </el-select>
        <el-select class="mar-r-3 width-150" v-model="searchListQuery.cityCode" placeholder="市" clearable @change="changeDistrict(searchListQuery.cityCode)">
            <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
        </el-select>
        <el-select class="mar-r-3 width-150" v-model="searchListQuery.countyCode" placeholder="区" clearable>
            <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
        </el-select>
        <el-button-group class="mar-l-10">
            <el-button type="primary" @click="handleSearch()">查询</el-button>
            <el-button @click="resetSearch()">重置</el-button>
        </el-button-group>
      </div>
      <el-button @click="handleClose">关闭</el-button>
    </div>
    <div class="pad-b-15">
      <el-button type="primary" @click="addmember()">批量选择</el-button>
    </div>
    <el-table :data="memberList" @selection-change="handleSelectionChange" v-loading="listLoading" lement-loading-text="加载中">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column property="nickname" label="店长昵称"></el-table-column>
      <el-table-column property="realName" label="店长姓名"></el-table-column>
      <el-table-column property="phone" label="手机号"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="addmember(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mar-t-10 mar-b-10 text-align-r">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchListQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { listProvince, listCity, listDistrict } from '@/api/area/area'
import { pagingEnterpriseShop, saveGoodsGroupAuthorize } from '@/api/goods/goodsGroup'
export default {
  props: {
    showFlag: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 商品组id
    groupId: {
      type: String
    }
  },
  data() {
    return {
      total: null,
      listLoading: false,
      searchListQuery: {
        enterpriseId: this.getEnterpriseId(),
        goodsGroupId: this.groupId,
        currentPage: 1,
        size: 10,
        keyword: '',
        provinceCode: '',
        cityCode: '',
        countyCode: ''
      },
      provinceList: [],
      cityList: [],
      districtList: [],
      memberList: [],
      // 选中行
      multipleSelection: []
    }
  },
  watch: {
    showFlag(val) {
      if (val) {
        this.resetSearch()
      }
    }
  },
  created() {
    // 获取省
    listProvince().then(response => {
      this.provinceList = response.data
    })
    this.initList()
  },
  mounted() {
  },
  methods: {
    initList() {
      this.listLoading = true
      pagingEnterpriseShop(this.searchListQuery).then(response => {
        this.total = response.data.total
        this.memberList = response.data.records
        this.listLoading = false
      })
    },
    // 获取市
    changeCity(provinceCode) {
      this.cityList = []
      this.districtList = []
      this.searchListQuery.cityCode = ''
      this.searchListQuery.countyCode = ''
      if (provinceCode) {
        listCity(provinceCode).then(response => {
          this.cityList = response.data
        })
      }
    },
    // 获取区
    changeDistrict(cityCode) {
      this.districtList = []
      this.searchListQuery.countyCode = ''
      if (cityCode) {
        listDistrict(cityCode).then(response => {
          this.districtList = response.data
        })
      }
    },
    // 查询事件
    handleSearch() {
      this.searchListQuery.currentPage = 1
      this.initList()
    },
    // 重置事件
    resetSearch() {
      this.searchListQuery = {
        enterpriseId: this.getEnterpriseId(),
        goodsGroupId: this.groupId,
        currentPage: 1,
        size: 10,
        keyword: '',
        provinceCode: '',
        cityCode: '',
        countyCode: ''
      }
      this.initList()
    },
    // 关闭事件
    handleClose() {
      this.$emit('addShop', false)
    },
    // 选择事件
    addmember(row) {
      var self = this
      const memberIds = []
      if (row) {
        memberIds.push(row.memberId)
      } else {
        self.multipleSelection.forEach(e => {
          memberIds.push(e.memberId)
        })
      }
      if (memberIds.length === 0) {
        self.$message({ message: '请勾选店铺', type: 'warning' })
        return
      }
      var form = {
        enterpriseId: self.getEnterpriseId(),
        goodsGroupId: self.searchListQuery.goodsGroupId,
        memberIds: memberIds,
        authorizeType: 1// 授权类型 1-门店 2-仓库
      }
      this.listLoading = true
      saveGoodsGroupAuthorize(form).then(response => {
        if (response.isError) return
        self.$message({ message: '添加成功', type: 'success' })
        self.initList()
        self.$emit('addShop', true)
      })
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 更改当前页面大小
    handleSizeChange(val) {
      this.searchListQuery.size = val
      this.initList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.searchListQuery.currentPage = val
      this.initList()
    }
  }
}
</script>

<style>
</style>